<!DOCTYPE html>
<html>
    <head>
        {% block head %}
        <link rel="stylesheet" href="{{base_url}}Templates/css/bootstrap.css" />
        <link rel="stylesheet" href="{{base_url}}Templates/css/style.css" />
        <title>{% block title %}{% endblock %} - Example.com</title>
        <script src="{{base_url}}Templates/js/jquery.js"></script>
        {% endblock %}
    </head>
    <body>
        <div class="container wrapper">
            <div id="header" class="row">
                <div class="span12"><img src="pictures/logo.jpg" /></div>
            </div>
            <div class="row">
                <div id="nav"  class="span12">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Phone</a></li>
                        <li><a href="#">Accessory</a></li>
                        <li><a href="#">Contact Us</a></li>
                    </ul>
                </div>
            </div>
            <div id="main">
                <div class="row">
                    <div id="left_sidebar" class="span3">
                        <ul class="nav nav-tabs nav-stacked">
                            <li class="active" id="phone-brand"><a href="#" id="brand-block">Brand</a></li>
                            <li><a href="#">Apple</a></li>
                            <li><a href="#">Nokia</a></li>
                            <li><a href="#">Samsung</a></li>
                            <li><a href="#">LG</a></li>
                            <li><a href="#">Sony Erission</a></li>
                            <li><a href="#">HTC</a></li>
                            <li><a href="#">Motorola</a></li>
                        </ul>
                          <ul class="nav nav-tabs nav-stacked">
                              <li class="active" id="phone-brand"><a href="#" id="accessory-block">Accessory</a></li>
                            <li><a href="#">Case</a></li>
                            <li><a href="#">Bluetooth</a></li>
                            <li><a href="#">Battery</a></li>
                            <li><a href="#">Speaker</a></li>
                        </ul>
                    </div>
                    <div class="span9" id="content">
                        {% block content %}{% endblock %}
                    </div>
                </div>
            </div>

            <div  class="row">
                <div id="footer" class="span12">
                    {% block footer %}
                    &copy; Copyright 2011 by <a href="http://domain.invalid/">you</a>.
                    {% endblock %}
                </div>
            </div>
        </div><!-- .container -->

    </body>
</html>